<template>
  <uni-nav-bar title="月度薪资" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" :style="{ height: pageHeight + 'px'}">
    <view class="space-between list" v-for="item in attendanList" :key="item.id"
      @click="navTo('administrator/sale/salaryDetail?title='+item.title+'&month='+item.month+'&id='+staff_id)">
      <view>{{item.title}}</view>
      <view>{{item.money}}</view>
    </view>
    <Popu v-if="attendanList.length<1" :pageHeight="pageHeight" text="暂无薪资记录"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { format } from 'date-fns';
  import { toPublish } from '@mqtt';
  import { getWagesList } from '@/gql/administrator';
  import { showLoading } from '@/utils/prompt';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { onLoad } from '@dcloudio/uni-app';
  /**
   * 月度薪资
   * @param staff_id 地推人员ID
   * @param pageHeight 页面高度
   * @param attendanList 月度薪资列表
   * @param lastPage 总页数
   * @param currentPage 当前页数
   */
  const now = new Date();
  let end = format(now, 'yyyy');
  const staff_id = ref();
  const attendanList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 55;
    },
  });
  onLoad((pearm) => {
    staff_id.value = Number(pearm.id)
    init()
  })
  /**
   * 获取当前地推人员月度薪资列表
   */
  function init() {
    showLoading()
    const payload = {
      query: getWagesList,
      variables: {
        page: currentPage.value,
        staff_id: staff_id.value,
        year: end
      },
    };
    toPublish(
      'ql/staff/getWagesList',
      payload,
      (obj : any) => {
        const { getWagesList } = obj.data;
        attendanList.value = [...attendanList.value, ...getWagesList.list];
        lastPage.value = getWagesList.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
</script>

<style scoped lang="less">
  .list:nth-last-of-type(1) {
    border-bottom: 0px;
  }

  .list {
    width: 100%;
    background: #fff;
    padding: 30rpx 20rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }
</style>